<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									年级
								</view>
							</view>
							<view class="right">
								<picker @change="gradeChange" :value="gradeIndex" :range="gradeArray" name="grade">
									<view class="uni-input">{{gradeArray[gradeIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="studyNo" placeholder="输入学号" :value="studyNo" disabled/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									姓名
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fullName" placeholder="输入姓名" :value="fullName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									专业
								</view>
							</view>
							<view class="right">
								<picker @change="majorChange" :value="majorIndex" :range="majorArray" name="major">
									<view class="uni-input">{{majorArray[majorIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									导师
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="teacherName" placeholder="输入姓名" :value="teacherName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学生类型
								</view>
							</view>
							<view class="right">
								<picker @change="studentChange" :value="studentIndex" :range="studentArray" name="studentClass">
									<view class="uni-input">{{studentArray[studentIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									身份证
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="idCard" placeholder="输入身份证" :value="idCard"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									出生年月
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="dateChange" :value="date" name="date" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{date}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									性别
								</view>
							</view>
							<view class="right">
								<picker @change="sexChange" :value="sexIndex" :range="sexArray" name="sex">
									<view class="uni-input">{{sexArray[sexIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									婚否
								</view>
							</view>
							<view class="right">
								<picker @change="marriageChange" :value="marriageIndex" :range="marriageArray" name="marriage">
									<view class="uni-input">{{marriageArray[marriageIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									民族
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="nationality" placeholder="输入民族" :value="nationality"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									政治面貌
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="politicalStatus" placeholder="输入政治面貌" :value="politicalStatus"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									籍贯
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="nativePlace" placeholder="输入籍贯" :value="nativePlace"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									宿舍
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="hostel" placeholder="输入宿舍" :value="hostel"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									联系方式
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="phone" placeholder="输入手机号" :value="phone"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭联系人1
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fname1" placeholder="输入家庭联系人" :value="fname1"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭联系人1手机号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fphone1" placeholder="输入手机号" :value="fphone1"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭联系人2
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fname2" placeholder="输入家庭联系人" :value="fname2"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭联系人2手机号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fphone2" placeholder="输入手机号" :value="fphone2"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									电子邮箱
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="email" placeholder="输入邮箱" :value="email"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									是否生源/助学贷款
								</view>
							</view>
							<view class="right">
								<picker @change="studentSourceChange" :value="studentSourceIndex" :range="studentSourceArray" name="studentSource">
									<view class="uni-input">{{studentSourceArray[studentSourceIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭住址
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="address" placeholder="输入住址" :value="address"/>
										
							</view>
						</view>
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const gradeArray =ref(['请选择年级','大一','大二','大三','大四','研一']);
const gradeIndex =ref(0);
const studyNo =ref(5461321321);//学号
const fullName =ref('');//姓名
const majorArray = ref(['请选择专业','计算机','国际贸易','汉语言']);//专业
const majorIndex = ref(0);
const teacherName =ref('');//导师
const studentArray = ref(['请选择学生类型','本科生','研究生','博士生']);//学生类型
const studentIndex = ref(0);
const idCard = ref('');
const date =ref('2003-09-24');
const sexArray = ref(['请选择性别','男','女']);//性别
const sexIndex = ref(0);
const marriageArray = ref(['请选择','否','是']);//婚否
const marriageIndex = ref(0);
const nationality = ref('汉');//民族
const politicalStatus =ref('');//政治面貌
const nativePlace = ref('');//籍贯
const hostel = ref('');//宿舍
const phone = ref('');//手机号
const fname1 = ref('');//家庭联系人1
const fname2 = ref('');//家庭联系人2
const fphone1 = ref('');//家庭联系人手机号1
const fphone2 = ref('');//家庭联系人手机号2
const studentSourceArray = ref(['请选择','否','是']);//是否生源/助学贷款
const studentSourceIndex = ref(0);
const address = ref('');//家庭住址
const email = ref('');//邮箱

const formSubmit = (e)=>{
	console.log(e);
}


//年级选择
const gradeChange = (e)=>{
	
	gradeIndex.value = e.detail.value;
}

// 专业选择
const majorChange = (e)=>{
	
	majorIndex.value = e.detail.value;
}

// 学生类型选择
const studentChange = (e)=>{
	
	studentIndex.value = e.detail.value;
}

// 出生日期选择
const dateChange = (e)=>{
	
	date.value = e.detail.value;
}

// 性别选择
const sexChange = (e)=>{
	
	sexIndex.value = e.detail.value;
}

//婚姻选择
const marriageChange = (e)=>{
	
	marriageIndex.value = e.detail.value;
}

//生源贷款选择
const studentSourceChange = (e)=>{
	
	studentSourceIndex.value = e.detail.value;
}	
</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding-bottom: 50rpx;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>